<template>
	<view class="back_">
	   <view class="backitem_"  v-for="(item, index) in banklist" :key="index" @tap="gobackdel(item)">
		    <image v-if="(index+1)%2!==0" class="backitemimg_" src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230720/d7e7ecb0c5e845b3ae84398105cba81f.png" ></image>
			<image v-if="(index+1)%2===0" class="backitemimg_" src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230720/f77a9acf2bdb44e18b7544659a18caf5.png" ></image> 
		   <view class="backiteminfo_">
		   	<view class="title">
		   				  
		   				  
		   				   <view class="titleitem_">
		   				   	  <!-- <image src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230719/1cf200220faf47e18ad41f5c51df8584.png" ></image> -->
		   				   	  <text>{{item.bankName}}</text>
		   				   </view>
		   				   <view class="titlexq_">
		   				   	   <text>详情>></text>
		   				   </view>
		   	</view>
		   	
		   	<view class="backcardname_">
		   		  <text>****</text>
		   				  <text>****</text>
		   				  <text>****</text>
		   				  <text>{{item.bankCardNo.slice((item.bankCardNo.length)-4,item.bankCardNo.length)}}</text>
		   	</view>
		   </view>
		   
	   	
	   </view>
	   <!-- <view class="none_list_wrapper" v-if="banklist.length === 0">
	     <view class="none_list">
	       <image src="/static/None/None_list.png"></image>
	       <text>暂无银行卡喔~</text>
	     </view>
	   </view> -->
	   <!-- <view class="footer"> -->
	   	<view class="addback_" @tap="goaddbackfun">
	   		 <!-- <image src="" mode=""></image> -->
	   			 <text class="addtitle_">+</text>
	   			 <text>添加银行卡</text>
	   	</view>
		
		
	   <!-- </view> -->
	   
	   
	   
	</view>
</template>

<script>
	// import { sendSmsCode, switchAccount } from "../../../api/assist/index.vue";
	
	import {
		userBanklist,} from "@/api/bankcard";
	
	const app = getApp();
	export default {
	  name: "index.vue",
	  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	  onReady() {
	    // this.$refs.uForm.setRules(this.rules);
		
		
	  },
		  
	  onShow(){
		  console.log(1)
		  this.banklist=[]
		  this.listPage();
	  },
	  data() {
	    return {
	      formData:{
			  size:100,
			  current:1,
		  },
		  banklist:[]
	    };
	  },
	  methods: {
		  //点击组件触发上拉加载
		  loadNextFn() {
		    this.listPage();
		  },
		  
		async listPage(){
			// ""
	// 		this.banklist= [
 //        {
 //            "id": 5,
 //            "userId": 35,
 //            "payeeName": "X",
 //            "bankCardNo": "111111111111",
 //            "bankId": 45454,
 //            "bankNo": "105",
 //            "bankName": "中国建设银行",
 //            "bankBranchName": "中国建设银行湖北省分行",
 //            "bankPhone": null,
 //            "idCard": null,
 //            "settleBankNo": "105521000012",
 //            "signNo": null,
 //            "bindComplete": 0,
 //            "createTime": "2023-07-19 16:51:25",
 //            "lastModifiedBy": null,
 //            "lastModifiedTime": "2023-07-19 16:51:25",
 //            "version": 1,
 //            "isDelete": false
 //        },
	// 	{
	// 	    "id": 5,
	// 	    "userId": 35,
	// 	    "payeeName": "X",
	// 	    "bankCardNo": "111111111111",
	// 	    "bankId": 45454,
	// 	    "bankNo": "105",
	// 	    "bankName": "中国建设银行",
	// 	    "bankBranchName": "中国建设银行湖北省分行",
	// 	    "bankPhone": null,
	// 	    "idCard": null,
	// 	    "settleBankNo": "105521000012",
	// 	    "signNo": null,
	// 	    "bindComplete": 0,
	// 	    "createTime": "2023-07-19 16:51:25",
	// 	    "lastModifiedBy": null,
	// 	    "lastModifiedTime": "2023-07-19 16:51:25",
	// 	    "version": 1,
	// 	    "isDelete": false
	// 	},
	// 	{
	// 	    "id": 5,
	// 	    "userId": 35,
	// 	    "payeeName": "X",
	// 	    "bankCardNo": "111111111111",
	// 	    "bankId": 45454,
	// 	    "bankNo": "105",
	// 	    "bankName": "中国建设银行",
	// 	    "bankBranchName": "中国建设银行湖北省分行",
	// 	    "bankPhone": null,
	// 	    "idCard": null,
	// 	    "settleBankNo": "105521000012",
	// 	    "signNo": null,
	// 	    "bindComplete": 0,
	// 	    "createTime": "2023-07-19 16:51:25",
	// 	    "lastModifiedBy": null,
	// 	    "lastModifiedTime": "2023-07-19 16:51:25",
	// 	    "version": 1,
	// 	    "isDelete": false
	// 	}
 //    ]
	// return
			  const res = await userBanklist(this.formData);
			  if (res.code === 0) {
			    this.banklist.push(...res.data);
			  		
			  }
		  },
		goaddbackfun(){
			uni.navigateTo({
			  url: `/pages/subpackage/bankcard/addbankcard`,
			});
		},
		
		gobackdel(item){
			// uni.navigateTo({
			// 	// ?order=${JSON.stringify(item)}
			// 	 url: `/pages/subpackage/bankcard/addbankcard`,
			// 	// url:"pages/subpackage/bankcard/addbankcard"
			// })
			
			uni.navigateTo({
			  url: `/pages/subpackage/bankcard/detbankcard?bankdet=${JSON.stringify(item)}`,
			});
		},
	    end() {
	      // this.$u.toast("倒计时结束");
	    },
	    start() {
	      // this.$u.toast("倒计时开始");
	    },
	    //倒计时期间，每秒触发一次
	    codeChange(text) {
	      // console.log(text, "倒计时");
	      this.tips = text;
	    },
	
	    async getCode() {
	      if (this.formData.phone) {
	        if (this.$refs.uCode.canGetCode) {
	          // 模拟向后端请求验证码
	          uni.showLoading({
	            title: "正在获取验证码",
	          });
	          const res = await sendSmsCode(this.formData.phone);
	          console.log(res, "验证码");
	          if (res.code === 0) {
	            uni.hideLoading();
	            // 这里此提示会被this.start()方法中的提示覆盖
	            this.$u.toast("验证码已发送");
	            // 通知验证码组件内部开始倒计时
	            this.$refs.uCode.start();
	          }
	        } else {
	          this.$u.toast("倒计时结束后再发送");
	        }
	      } else {
	        uni.showToast({
	          title: "请输入手机号",
	          icon: "error",
	          duration: 2000,
	        });
	      }
	    },
	
	 
	  },
	};
	
</script>

<style lang="scss">
	.back_{
		// background: #ffffff;
	    min-height: 100vh;
		padding-bottom: 32rpx;
			padding-top: rpx(12);
		>.backitem_{
			position: relative;
			width: rpx(351);
			height: rpx(126);
			margin: 0 auto;
			// text-align: center;
		
			>.backitemimg_{
				width: rpx(351);
				height: rpx(126);
			}
			>.backiteminfo_{
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: rpx(20) rpx(16);
				>.title{
					display: flex;
					justify-content: space-between;
					> .titleitem_{
						display: flex;
						justify-content: left;
						align-items: center;
						>image{
							width: rpx(20);
							height: rpx(20);
							margin-right: rpx(8);
						}
						>text{
							font-size: rpx(15);
							font-weight: bold;
							color: #FFFFFF;
						}
					}
					> .titlexq_{
						font-size: rpx(12);
						font-weight: 400;
						color: #FFFFFF;
					}
				}
				>.backcardname_{
					font-size: rpx(18);
					font-weight: bold;
					color: #FFFFFF;
					margin-top: rpx(24);
					>text{
						margin-right: rpx(10);
					}
			}
			
			
			}
		}
		>.addback_{
			width: rpx(351);
			height: rpx(50);
			background-color: white;
			border-radius: rpx(10);
			display: flex;
			justify-content: center;
			margin: 0 auto;
			align-items: center;
			 >text{
				 font-size: rpx(16);
				 font-weight: bold;
				 color: #353535;
				 
			 }
			.addtitle_{
				font-size: rpx(30);
				line-height: rpx(30);
				font-weight: bolder;
				padding-bottom: rpx(5);
				color: #353535;
				margin-right: rpx(12);
			}
		}
		>.footer{
			position: fixed;
			width: 100%;
			background-color: rgb(245,245,245);
			bottom: 0;
			// height: 106rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			>.addback_{
				width: rpx(351);
				height: rpx(50);
				background-color: white;
				border-radius: rpx(10);
				display: flex;
				justify-content: center;
				margin: 0 auto;
				align-items: center;
				 >text{
					 font-size: rpx(16);
					 font-weight: bold;
					 color: #353535;
					 
				 }
				.addtitle_{
					font-size: rpx(30);
					line-height: rpx(30);
					font-weight: bolder;
					padding-bottom: rpx(5);
					color: #353535;
					margin-right: rpx(12);
				}
			}
		}
		
	}
	.none_list_wrapper {
	  display: flex;
	  align-items: center;
	  justify-content: center;
		width: 100%;
		height: 100%;
	  > .none_list {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
		  margin-top: 30vh;
		
	    > image {
	      width: rpx(222);
	      height: rpx(158);
	      vertical-align: middle;
	    }
	    > text {
	      font-size: rpx(13);
	      font-weight: 400;
	      color: #b2b2b2;
	    }
	  }
	}
	.footsq_{
		display: flex;
		justify-content: center;
	}
</style>